<!-- 登录页 -->
<template>
  <view v-if="loading" class="my-content">
    <view class="u-page">
      <view class="" style="overflow: hidden;">
        <image class="_logo"
               src="https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20231101/860a78bc68432262483557fff306b740.png">
        </image>
      </view>
      <view class="my-ipt">
        <view style="color: #FFFFFF;margin-bottom: 10px;text-align: center;">{{ $t('推广员绑定') }}</view>
        <view class="ipt-magin" style="margin-bottom: 24rpx;line-height: 44px;padding-left: 10px;">
          <!--<u-input disabled value="" :border='true' height='89' type="type" />-->
          {{ $t('推广员ID') }}：{{ agent['id'] }}
        </view>
        <view class="ipt-magin" style="margin-bottom: 24rpx;">
          <u-input v-model="account" :border='true' height='89' :placeholder="$t('请输入账号')" type="type" />
        </view>
        <view style="padding: 10px;font-size: 12px;">
          {{ $t('如果您没有GLUZ账户，请前去GLUZ微信小程序或者下载GLUZ - APP注册后再绑定推广员') }}
        </view>
      </view>
      <view class="button">
        <u-button :custom-style="customStyle" hover-class="none" type="primary" @click="doBind">
          {{ $t('绑定') }}
        </u-button>
      </view>
      <view class="u-checkbox radio">
        <view style="display: flex;flex-direction:column;align-items: center;margin-bottom: 20px;">
          <view>{{ $t('小程序二维码') }}</view>
          <u-image width="200" height="200"
                   src="https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20231201/481574c8fc02a274fad85043b022111f.jpg"></u-image>
        </view>
        <u-button @click="goDownload(1)" :custom-style="customStyle2" hover-class="none" type="default">
          {{ $t('安卓下载') }}
        </u-button>
        <u-button @click="goDownload(2)" style="margin-top: 10px" :custom-style="customStyle2" hover-class="none"
                  type="default">
          {{ $t('IOS下载') }}
        </u-button>
      </view>

    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      agent: {},
      agent_id: 0,
      loading: false,
      account: '',
      customStyle: {
        width: '429rpx',
        height: '78rpx',
        background: 'linear-gradient(110deg, #DD2910 0%, #F79B29 100%)',
        'border-radius': '26rpx'
      },
      customStyle2: {
        width: '429rpx',
        height: '78rpx',
      },
    }
  },
  onLoad(options) {
    this.agent_id = options.agent_id
    if (!options.agent_id) {
      this.$u.toast(this.$t('缺少参数'))
    } else {
      this.getAgentInfo()
    }
  },
  methods: {
    getAgentInfo() {
      this.$u.api.basic.getAgentInfo({agent_id: this.agent_id}).then(res => {
        if(!res){
          this.$u.toast(this.$t('推广员信息错误'))
          return false
        }
        this.agent = res
        this.loading = true
      })
    },
    goDownload(type) {
      if (type === 1) {
        window.location.href = "https://www.pgyer.com/BPhOSV"
      } else {
        window.location.href = "https://www.pgyer.com/yzyrjs"
      }
    },
    doBind() {
      if (this.account === '') {
        this.$u.toast('请输入账号')
        return false
      }
      this.$u.api.basic.bindAgent({agent_id: this.agent_id, account: this.account}).then(res => {
        this.$u.toast('绑定成功')
        return false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.u-page {
  // height: 100%;
  background: linear-gradient(143deg, #FF340E 0%, #EA641D 34%, rgba(240, 124, 35, 0) 67%, rgba(245, 148, 40, 0) 100%);
  opacity: 0.87;
  // overflow: hidden;

  ._logo {
    width: 502rpx;
    height: 148rpx;
    display: block;
    margin: 176rpx auto;
  }

  .my-ipt {
    padding: 0 64rpx 0 55rpx;
    margin-bottom: 20px;
  }

  .u-input {
    background-color: #ffffff;

  }

  p {
    font-size: 24rpx;

    font-weight: 600;
    color: #FFFFFF;
    line-height: 35rpx;
    text-align: right;
    margin-right: 10rpx;
    margin-top: 30rpx;
  }

  .button {
    margin: 0 auto;
    padding: 0 64rpx 0 55rpx;
  }

  .checkbox-1 {
    font-size: 24rpx;
    word-break: break-all;
    font-weight: 400;
    color: #000000;
    line-height: 35rpx;
  }

  .checkbox-2 {
    font-size: 24rpx;
    word-break: break-all;
    font-weight: 400;
    color: #3534ED;
    line-height: 35rpx;
  }

  .radio {
    margin-top: 68rpx;
  }
}

.thirdparty {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 99rpx;
  padding: 0 62rpx 0 55rpx;

  span {
    font-size: 24rpx;

    font-weight: 400;
    color: #A9A9A9;
    line-height: 35rpx;
  }

  view:nth-child(1) {
    width: 222rpx;
    height: 1rpx;
    border: 1rpx solid #DADADA;
  }

  view:nth-child(3) {
    width: 225rpx;
    height: 1rpx;
    border: 1rpx solid #DADADA;
  }
}

.wx {
  display: flex;
  justify-content: center;
  margin-top: 47rpx;
  height: 247rpx;

  image {
    width: 69rpx;
    height: 69rpx;
    display: block;
    margin-right: 10rpx;
  }
}

.ipt-magin {
  background-color: #ffff;
  height: 89rpx;
  width: 100%;
  border-radius: 9rpx;
  box-sizing: border-box;
}

.forget {
  color: white;
  width: 450rpx;

  view {
    text-align: center;
    line-height: 100rpx;
    // margin-top: 20rpx;
  }
}
</style>
